/**
 * 外框架组件
 * by swl
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Dropdown } from 'antd';
import { connect } from 'dva';
import styles from './style.less';
import videoBtn from '@/src/assets/comps/other/contentPackage/videoBtn.png';
import downBtn from '@/src/assets/comps/other/contentPackage/downBtn.png';
import { FirstHeaderC } from '../..';

class ContentPackage extends Component {
  // 默认值
  static defaultProps = {
    title: '', // 一级标题
    contentHtml: undefined, // 页面内容
    rightHtml: undefined, // 以及标题右侧内容
  };

  constructor(props) {
    super(props);
    this.state = {
      videoshow: true, // 是否展示系统视频
      veidoList: [], // 当前页面视频列表
    };
  }

  componentDidMount() {
    this.queryVeidoList();
  }

  // 查询当前页面视频列表
  queryVeidoList = () => {
    const query = window.location.href.split('#/')[1];
    this.props.dispatch({
      type: 'systemVedioM/queryVeidoList',
      payload: {
        path: query,
      },
      callback: (data) => {
        this.setState({
          veidoList:
            query === 'newDemo'
              ? [
                  { title: '视频一', key: '1' },
                  { title: '视频二', key: '2' },
                  { title: '视频三', key: '3' },
                ]
              : data || [],
        });
      },
    });
  };

  // 播放视频
  openVedio = (id) => {
    const url = `${window.location.href.split('/#/')[0]}/#/videoPlayer?id=${id}`;
    window.open(url);
  };

  rightHtml = () => {
    const { rightHtml } = this.props;
    const { veidoList } = this.state;
    const items = [];
    this.state.veidoList.length &&
      this.state.veidoList.map((item, index) => {
        items.push({
          label: (
            <span
              onClick={() => {
                this.openVedio(item.value);
                console.log('e', index);
              }}
            >
              {item.title}
            </span>
          ),
          key: index,
        });
      });

    return (
      <div>
        {veidoList && veidoList.length ? (
          <div className={styles.moreOperation}>
            <Dropdown menu={{ items }} trigger={['click']} arrow={true} overlayClassName='menuListPackage'>
              <div>
                <img src={videoBtn}></img>
                查看视频
                <img style={{ width: '12px', heighr: '12px', marginLeft: '4px' }} src={downBtn}></img>
              </div>
            </Dropdown>
          </div>
        ) : (
          ''
        )}
        {rightHtml}
      </div>
    );
  };

  render() {
    const { title, contentHtml } = this.props;

    return (
      <div className={styles.contentPackage}>
        {title ? <FirstHeaderC title={title} Right={this.rightHtml()} /> : ''}
        {contentHtml}
      </div>
    );
  }
}
// props默认值
ContentPackage.propsTypes = {
  title: PropTypes.string, // 一级标题
  contentHtml: PropTypes.node, // 页面内容
  rightHtml: PropTypes.node, // 一级标题右侧内容
};

export default connect(({ systemVedioM }) => ({ systemVedioM }))(ContentPackage);
